<template>
	<view class="box" :style="theme">
		<!-- 类型 -->
		<view class="box_config">
			<scroll-view scroll-x class="box_tabs">
				<view class="box_tabs_item" :class="item.is ? 'active' : ''" v-for="(item, index) in cate" :key="index"
					@click="changeCate(item)">{{item.name}}</view>
			</scroll-view>
		</view>
		
		<!-- 取消订单弹框 -->
		<u-overlay :show="shows">
			<view class="wrapper">
				<view class="block">
					<view class="block_title">提示</view>
					<view class="block_info">是否取消此订单</view>
					<view class="block_footer">
						<view class="block_footer_a" @click="DCqx">取消</view>
						<view class="block_footer_b" @click="$noMultipleClicks(bookingCancellation)">确定</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- 列表 -->
		<view class="box_list" v-if="list && list.length != 0">
			<view class="box_list_item" v-for="(item, index) in list" :key="index">
				<view class="box_list_item_title" @click="jumpdesc(item)">
					<view class="box_list_item_title_cnt">
						<view class="flex-cb">
							<view class="limit-1-line flex-1">{{item.venueName || ''}}</view>
							<view class="box_list_item_title_right">
								<text v-if="item.payStatus == 0">待支付</text>
								<text v-if="item.payStatus == 1">过期未支付</text>
								<text v-if="item.payStatus == 2">已取消</text>
								<text v-if="item.payStatus == 3">已支付</text>
								<text v-if="item.payStatus == 4">退款中</text>
								<text v-if="item.payStatus == 5">退款成功</text>
							</view>
						</view>
						<view v-for="(em, dex) in item.items" :key="dex" class="flex-cb">
							<text>{{em.deviceName + ' ' + em.name}}</text>
							<text>¥{{em.realPrice + '*' + em.num}}</text>
						</view>
					</view>
					
				</view>
				<view class="box_list_item_zf">
					<view class="box_list_item_zf_left" @click="jumpdesc(item)">
						<text>合计：</text>
						<text>¥{{item.realPrice ? item.realPrice : item.allPrice}}</text>
					</view>
					<view class="box_list_item_zf_right" v-if="item.payStatus == 0">
						<view class="box_list_item_zf_right_q" @click="DCdk(item)">取消支付</view>
						<view class="box_list_item_zf_right_j" @click="continueToPay(item)">继续支付</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				status: 'nomore',
				noClick: true,
				payStatus: '', //订单类型id
				page: 1, //页码
				end: false, //控制是否还能切换下一页
				shows: false, //取消订单弹框
				isRefresh: false, //是否刷新
				orderId: '',
				list: [], //订单数据
				cate: [ //订单分类
					{
						name: '全部',
						id: '',
						is: true
					},
					{
						name: '待支付',
						id: '0',
						is: false
					},
					{
						name: '超时未支付',
						id: '1',
						is: false
					},
					{
						name: '取消支付',
						id: '2',
						is: false
					},
					{
						name: '支付成功',
						id: '3',
						is: false
					}
				]
			}
		},
		onLoad(options) {
			this.firstQueryTime = this.$app.firstQueryTime()
		},
		onShow() {
			this.reset()
		},
		onPullDownRefresh() {
			this.reset()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			// 继续支付
			continueToPay(e) {
				this.jump('/pages/order/pay?type=8&payOrder=1&orderId=', e.orderId)
			},
			jumpdesc(e) {
				this.jump('/pages/order/detail?type=8&orderId=' + e.orderId)
			},
			DCdk(e) {
				this.shows = true
				this.orderId = e.orderId
			},
			DCqx() {
				this.shows = false
			},
			changeCate(e) {
				let arr = [...this.cate]
				arr.forEach(item => {
					if (item.id == e.id) {
						item.is = true
					} else {
						item.is = false
					}
				})
				this.payStatus = e.id
				this.cate = arr 
				this.reset()
			},
			getList() {
				this.$app.ajax({
					api: this.$api.appCoinsList(),
					data: {
						pagination: {
							page: this.page,
							firstQueryTime: this.firstQueryTime,
							rows: 10
						},
						param: {
							payStatus: this.payStatus
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = [...this.list, ...res.recordList]
						}
					}
				}).catch(() => {})

			},
			bookingCancellation() {
				this.$app.ajax({
					api: this.$api.appCancelOrder(),
					data: {
						param: {
							orderId: this.orderId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.shows = false
						this.$app.showToast('取消成功')
						this.reset()
					}
				}).catch(() => {})
			},
			
			reset() {
				this.list = [];
				this.page = 1;
				this.firstQueryTime = this.$app.firstQueryTime()
				this.end = false;
				this.getList()
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}
		}

	}
</script>
<style scoped lang="scss">
	.box_config {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 10;
	}

	.box_tabs {
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
		background: #ffffff;
	}

	.box_tabs {
		white-space: nowrap;
	}

	.box_tabs_item {
		display: inline-flex;
		padding: 18rpx 28rpx;
		background: $bjColor;
		border-radius: 30rpx;
		margin-right: 18rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #111111;
	}

	.active {
		background: $color;
		font-weight: 400;
		color: #FFFFFF;
	}

	.box_list {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.box_list_item {
		padding: 30rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 25rpx;
	}

	.box_list_item_title {
		display: flex;
		justify-content: space-between;
	}

	.box_list_item_title_cnt{
		display: flex;
		flex-direction: column;
		width: 100%;
		view {
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			margin-top: 20rpx;
			&:first-child {
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				margin-top: 0;
			}
			.box_list_item_title_right {
				font-size: 26rpx;
				font-weight: 500;
				color: $color;
				margin-top: 0;
			}
		}
	}

	.box_list_item_zf {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 62rpx;
	}

	.box_list_item_zf_left text:nth-child(1) {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.box_list_item_zf_left text:nth-child(2) {
		font-size: 30rpx;
		font-weight: 600;
		color: $color;
	}

	.box_list_item_zf_right {
		display: flex;
		align-items: center;
	}

	.box_list_item_zf_right_q {
		padding: 12rpx 28rpx;
		border-radius: 26rpx;
		border: 1px solid #B2B2B2;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #777777;
	}

	.box_list_item_zf_right_j {
		padding: 12rpx 28rpx;
		border-radius: 26rpx;
		border: 1px solid $color;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 400;
		color: $color;
		margin-left: 20rpx;
	}
</style>
